<%@ Page Language="C#" MasterPageFile="doc.master" Title="3 Seite" %> <%@ Register TagPrefix="mod" TagName="inline" Src="/Mod/Mod_Inline.ascx" %> <%@ Register TagPrefix="mod" TagName="content" Src="/Mod/Mod_Content.ascx" %> <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="head"> <link href="/css/mod.css" rel="stylesheet" /> <style type="text/css"> .auto-style1 { text-align: right; } .auto-style2 { text-align: center; } .auto-style3 { text-align: justify; } .auto-style4 { margin-left: 40px; } .auto-style5 { border-style: solid; border-width: 1px; padding: 1px 4px; } </style> </asp:Content> <asp:Content ID="Content3" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1"> <mod:content ID="Content1" Area="body" Headings="h2 h3" runat="server" /> <h1>Eine Html-Seite</h1> <p> Wenn man mit Datei -> Neu -> HTML eine neue Seite eröffnet, hat sie den Namen „Ohne_Titel_1.htm“. In der Entwurfsansicht ist sie leer und in der Code-Ansicht hat sie fogenden Aufbau: </p> <mod:inline runat="server" ID="ModInline1" Pat="/documentation/files/" Fil="LeereHtmlDatei.html" Mode="high" Extension=".xml"></mod:inline> <p> Der DOCTYPE sagt dem Browser, um welches HTML es sich handelt. Es gibt HTML 4, XHML und FRAMESET. Mit dieser Angabe kann der Browser (und Validierungsprogramme) die Richtigkeit der Seite überprüfen. </p> <p> Die Seite selbst besteht aus ineinander verschachtelten Tags <..>, die geöffnet und geschlossen werden. In öffnenden Tags können Attribute stehen, die das Tag genauer beschreiben. </p> <p> Alle Tags und die zugehörigen Attribute schreibt man klein. </p> <p> Während HTML 4.0 sehr fehlertolerant war, ist XHTML genauer. Man sollte XHTML verwenden. </p> <p> Die Seite selbst besteht aus <code><html>…</html></code> und den beiden Bereichen <code><head>…</head></code> (nicht darstellbar) und <code><body>…</body></code> (eigentlicher Inhalt). </p> <p> Das Attribut <code>xmlns= <a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> verweist auf die Syntax des Dokumententyps. </p> <p> Der <code><title></code>-Tag enthält jenen Namen, der im Browser in der Kopfzeile angezeigt wird. Der Meta-Tag Content wird vom Editor automatisch angelegt und sagt, in welchem Zeichensatz der Text geschrieben wurde. Diese Angabe ist wichtig, damit der Browser die Nicht-ASCII-Zeichen richtig darstellen kann. Weiters stehen hier </p> <ul> <li>Stylesheets und Links zu Stylesheets </li> <li>Skripts und Links zu Skriptdateien </li> <li>Meta-Angaben für Suchmaschinen </li> </ul> <p> Im Body-Teil stehen die eigentlichen Inhalte. </p> <h2>Eigenschaften</h2> <p> Um grundsätzliche Einstellungen vorzunehmen, verwendet man in Expression Web den Menüpunkt <code>Datei -> Eigenschaften</code>. </p> <p> <b>Allgemein</b>: diese Angaben werden im Header-Teil der Seite eingebettet. Die Basisadresse ist jene Adresse, die die Datei nach der Publikation haben wird. Wenn jemand diese Datei aus den Rechner lädt, weiß er über diesen Meta-Tag von wo sie kommt. </p> <p> <b>Formatierung</b>: diese Angaben sind Attribute im Body-Tag. Das Hintergrundbild überdeckt die Hintergrundfarbe, außer in transparenten Bereichen. Das Hintergrundbild kann nicht skaliert werden (weil es sich nicht in einem img-Tag befindet). </p> <p> <b>Benutzerdefiniert</b>: man kann weitere Meta-Angaben einfügen </p> <p> <b>Sprache</b>: hier werden die Sprache und der Zeichensatz festgelegt </p> <h2>Frame-Seiten</h2> <p> Mit <code>Datei -> Neu -> Seite </code>kann man den Seitentyp genauer wählen. An dieser Stelle wichtig sind die Frame-Seiten, die immer dann verwendet werden, wenn die Navigation nicht Teil derselben Seite ist. </p> <p> Frameseiten teilen das Fenster in festen oder proportionalen Abständen. Es gibt zahlreiche Vorlagen dazu. </p> <p> Eine Frameseite besteht aus so vielen Einzeldateien als es Frames gibt und zusätzlich aus einem Frameset, welches die Anordnung dieser Dateien am Bildschirm angibt. </p> <p> Wesentlich für Frame-Seiten ist, dass ein Link in einer der Seiten sich auch auf andere Frameseiten beziehen kann. Daher ist es bei Frames wichtig, dass jede Frameseite benannt wird und dass bei einem Verweis in einem Link das Attribut target angegeben wird, das als Wert den Namen des Zielframes hat. </p> <h2>Intellisense</h2> <p> Man muss diese Tags nicht auswendig lernen aber mit der Zeit kennt man sie auswendig. Beim Lernen hilft uns ein mächtiges Tool, das „Intellisense“. Egal, an welcher Stelle man zu tippen beginnt, immer sagt uns das System, was wir an dieser Stelle tun können. Gibt man im Head-Teil eine öffnende spitze Klammer ein, sieht man die hier möglichen Tags, ebenso im Body-Teil. Aber auch innerhalb des öffnenden Tags erfährt man, welche Attribute an dieser Stelle möglich sind. </p> <h2>Entwurfsansicht</h2> <p> Die Entwurfsansicht verhält sich ähnlich wie ein Texteditor. </p> <p> Die Symbolleiste <code>Allgemein</code> ist für diese Arbeit zutreffend. <code>Allgemein</code> ist eine Kombination aus <code>Standard</code> und <code>Formatierung</code>. </p> <p> Das Aussehen einer Seite wird definiert durch die Struktur und das Format. Theoretisch könne man eine Seite aus einem einzigen Absatz herstellen, der durch abschnittsweise Formate sein Aussehen ändert. Aber man verwendet eine Mischung aus Struktur-Elementen (Tags) und Stilelementen (Styles). </p> <h2>Strukturelemente</h2> <p> Übung: Eingabe von 14 Absätzen der Form <i>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</i> </p> <p> Danach übertragen wir jedem Absatz der Reihe nach die „Formatvorlage“ und stellen den Namen der Formatvorlage (des Tags) davor. „Formatvorlage“ ist eine falsche Übersetzung, denn den Begriff „Formatvorlage“ gibt es bei Html-Dateien nicht. Den hat man von Word übernommen. Gemeint sind die in Html zur Verfügung stehenden Struktur-Tags, die man in der ersten Auswahl-Box in der Symbolleiste <code>Allgemein</code> findet. Diese Strukturelemente kann man ausschließlich über die Symbolleiste <code>Allgemein</code> zuweisen. </p> <p> Ein besonders Verhalten haben <code>ul</code> ol und <code>dd</code>, denn sie schließen ihrerseits Elemente ein. <code>ul</code> und <code>ol</code> schließen <code>li</code> ein und <code>dl</code> schließt <code>dd</code> und <code>dt</code> ein. </p> <h3>Ergebnis</h3> <p> p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, … </p> <h1>h1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</h1> <h2>h2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</h2> <h3>h3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</h3> <h4>h4 tie …</h4> <h5>h5 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</h5> <h6>h6 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</h6> <ul> <li>li Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</li> <li>li Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> <ol> <li>li Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</li> <li>li Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ol> <dl> <dt>li Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</dt> <dt>li Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dt> </dl> <address> address Lorem ipsum dolor sit amet, consetetur sadipscing elitr, … </address> <pre>pre Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …</pre> <blockquote> blockquote Lorem ipsum dolor sit amet, consetetur sadipscing elitr, … </blockquote> <blockquote> blockquote Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </blockquote> <h2>Formatieren eines Absatzes</h2> <p> Man kann auf jeden Absatz die üblichen Absatzformatierungen linksbündig, rechtsbündig, zentriert und Blocksatz, eingerückt anwenden. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p class="auto-style1"> Rechts Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p class="auto-style2"> Zentriert Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p class="auto-style3"> Blocksatz Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <div class="auto-style4"> <p> Eingerückt Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="auto-style5"> <p> Individuell Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <p>Was geschieht dabei?</p> <p> In jedem Absatz wird das Attribut <code>class</code> mit einem fortlaufend nummerierten Namen <code>auto-style</code> eingefügt und im Kopf der Datei wird jeder diese Stile in einem Style-Sheet definiert. </p> <mod:inline runat="server" ID="Inline2" Pat="/documentation/files/" Fil="HtmlUndCss.html" Mode="high" Extension=".xml"></mod:inline> <p> Ab sofort stehen diese Style-Sheets zur Verwendung in weiteren Absätzen zur Verfügung und das Aussehen eines Absatzes kann ab sofort auf zwei Arten verändert werden: </p> <p> Mit direkter Formatierung über die Symbolleiste (wirkt sich nur auf den markierten Absatz aus) </p> <p> Mit indirekter Formatierung (Veränderung des Stylesheet): wirkt sich auf alle Absätze aus, die mit der Vorlage (dem StyleSheet) formatiert worden sind. </p> <p> Formatvorlagen in Webseiten heiße StyleSheets. Style-Sheets können auf drei Arten verwendet werden: </p> <ul> <li> <b>Implizit</b>: im Html-Tag <code><p style=“background-color:green;“></code> </li> <li> <b>Explizit</b>: in einer Zusammenfassung im Kopf der Seite <code><p class=“b_green“></code> </li> <li> <b>Extern</b>: in einer Style-Sheet Datei .css <code><p class=“b_green“></code> </li> </ul> <p> Formatvorlagen können auf folgende Arten mit Tags verbunden werden: </p> <ul> <li> <code>name</code>: formatiert ein Tag <code><name></code> </li> <li> <code>.name</code>: formatiert ein Tag mit dem Attribut <code>class=“name“</code> </li> <li> <code>#name</code>: formatiert ein Tag mit <code>id=“name“</code> </li> </ul> <h2>Expression Web StyleSheet-Anwendung</h2> <p> Man kann in Expression Web genau festlegen, wie die gewünschte Formatierung in Kode abgebildet wird. </p> <p> <code>Extras -> Seiteneditoroptionen -> CSS</code> </p> <p> Hier legt man fest, ob bei einer Änderung eines Stils dieser Stil inline (d.h. im Tag mit dem style-Attribut) gesetzt wird oder über ein Style-Sheet innerhalb des Dokuments. </p> <h2>Expression Web und Formatvorlagen</h2> <h3>Bereiche</h3> <ul> <li>Tageigenschaften </li> <li>CSS-Eigenschaften </li> <li>Formatvorlagen übernehmen </li> <li>Formatvorlagen verwalten </li> <li>Ebenen </li> <li>Bedingte Formatierung </li> </ul> <h3>Symbolleisten</h3> <ul> <li>Formatierung </li> <li>Positionierung </li> <li>Formatvorlage </li> <li>Formatvorlagenanwendung </li> </ul> <h3>Format</h3> <ul> <li>Extras </li> <li>CSS-Berichte </li> <li>Seitenedioroptionen </li> </ul> <h2>Seitenfläche formatieren</h2> <p> Die Seite wird durch <code>Format->Hintergrund </code>formatiert </p> <h3>Absatz und Zeichen formatieren</h3> <p> Absatzformate können in jedem Tag definiert werden, Zeichen werden durch das Tag span eingerahmt. Manche Formate können sowohl als Absatz- als auch als Zeichenformat verwendet werden (zum Beispiel Schriftart) und andere wieder nur als Absatzformat (zum Beispiel Ausrichtung). </p> <p> Wir schreiben den Absatz und erhalten </p> <p> <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </p> <h3>Implizite indirekte Formatierung</h3> <p> Um diesen Absatz zu formatieren, müssen wir ihn in der Entwurfsansicht markieren, das Symbol „Hervorheben“ anklicken, die Farbe wählen und auf „Übernehmen“ klicken. Fertig. </p> <p> Am Kode ergibt sich dadurch folgende Änderung: </p> <p> Statt <code><p></code> steht da jetzt <code><p class="auto-style5"></code>. Und im Kopf der Datei steht im Tag <code><style></code> der neue Stil </p> <p> <code>.auto-style5 {<br /> background-color: #FFFF00;<br /> }</code> </p> <p> Das ist die Formatierungsart, die Expression Web bevorzugt verwendet, wenn man die Symbolleisten verwendet. Man könnte sie implizite indirekte Formatierung nennen. Indirekt, weil das Format nicht im Absatz selbst steht sondern im Kopf und implizit, weil der Name für das Format automatisch vergeben wird. Der Vorteil dieser Vorgangsweise ist, dass man den Stil auto-style5 auch an anderer Stelle verwenden kann. </p> <p> Man kann diese automatisch vergebenen Namen auch umbenennen. <code>Bereich -> Formatvorlagen verwalten </code> oder <code>Format -> CSS –Formatvorlagen -> Formatvorlagen verwalten</code> </p> <h3>Indirekte Formatierung</h3> <p> Um einen Absatz zu formatieren kann man diesen Stil auch gezielt vergeben und dabei auch den Namen mitbestimmen, damit der Kode lesbarer ist. Wir markieren dazu einen Absatz und wählen <code>Format -> Neue Formatvorlage</code> </p> <h3>Direkte Formatierung</h3> <p> Es funktioniert aber auch so: Man kann die Stilbeschreibung auch mit dem Attribut <code>style</code> direkt in den zu formatierenden Absatz übernehmen, also so: </p> <p> Man schreibt statt <code><p class="auto-style5"></code> jetzt <code><p style="background-color:#ffff00;"></code>. Dieser Absatz ist direkt formatiert und dadurch einmalig. </p> <h3>Externe Formatierung</h3> <p> Diese bisherigen Formate funktionieren nur in der gerade bearbeiteten Datei selbst. Wenn man aber ein bestimmtes Format auch in anderen Dateien verwenden will, muss man es in eine so genannte StyleSheet-Datei auslagern. Das geht so: </p> <p> Wir erzeugen mit <code>Datei -> Neu -> CSS </code> eine neue Stylesheet-Datei. Die bekommt die Endung CSS. In diese Datei kopieren wir den Stil und nennen ihn zum Beispiel <code>hinter-gelb</code>. Diese Datei speichern wir unter <code>mystyle.css</code>. </p> <p> Jetzt kopieren wir die automatisch generierten Stile in diese externe Datei und löschen sie gleichzeitig aus der Demo-Datei. Die Absätze erscheinen jetzt ohne Formatierung. Wir speichern diese StyleSheet-Datei unter <code>mystile.css</code>. </p> <p> Jetzt fügen wir mit <code>Format -> CSS Formatvorlagen -> Stylesheet anfügen</code> diese Datei in das Html-Dokument ein. Es wird die Zeile<br /> <code><link href="mystile.css" rel="stylesheet" type="text/css" /></code><br /> ergänzt. </p> <p> Diese Stil-Datei kann nun in allen Dokumenten des Webs verwendet werden. </p> <h2>Ebenen</h2> <p> Mit einer Ebene wird ein Abschnitt, ein <code>div</code>-Tag erzeugt. Diese Ebenen können beliebige Texte, Bilder und Tabellen enthalten und vor allem, man kann sie auf der Seite positionieren und mit dem Attribut <code>z-index</code> übereinander anordnen. </p> <p> Eine neue Ebene erzeugt man mit dem <code>div</code>-Symbol aus der Symbolleiste „Allgemein“. </p> <h2>Einfügungen</h2> <p> Einfügen kann man mit dem Menüpunkt „Einfügen“: </p> <ul> <li>Link: <code>< a href=““>…</a></code> </li> <li>Textmarke <code>< a name=““></a></code> </li> <li>Bild <code><img src=““/></code> </li> <li>Medien <code><object ></object></code> </li> <li><code>Symbole (z.B. &)</code> </li> </ul> <h2>Html-Kode einfügen</h2> <p> Um in Expression Web ein HTML-Konstrukt einzufügen, öffnet man mit <code>Bereiche -> Toolbox</code> die Toolbox und wählt die Elemente aus dem Bereich HTML aus. </p> <h2>Ergänzende Literatur</h2> <ul> <li> <asp:HyperLink ID="HyperLink4" CssClass="externallink" runat="server" Target="_blank" NavigateUrl="http://www.w3schools.com/html/default.asp"></asp:HyperLink> HTML Kurs (englisch) http://www.w3schools.com/html/default.asp </li> <li> <asp:HyperLink ID="HyperLink11" CssClass="externallink" runat="server" Target="_blank" NavigateUrl="http://de.selfhtml.org/"></asp:HyperLink> HTML-Kompendium (deutsch, Stefan Münz) http://de.selfhtml.org/ </li> </ul> <p> </p> </asp:Content>